<template>
    <div style="margin-left: 30px;">
        <video class="video" :src="audioSrc" autoplay controls @finish="onfinish" mStopped="true"  :playStatus="play_stat"></video>
        <div class="panel">
            <image class="audio-dyn" @click="play" :src="i_src"></image>
            <text class="audio-t">{{timeFomat}}</text>
        </div>
    </div>
</template>

<style scoped>

    .audio-t{
        font-size: 32px;
        color: #00c470;
        margin-left: 30px;
        line-height: 49px;
    }
    
    .audio-dyn{
        width: 50px;
        height: 50px;
        margin-left: 30px;
    }


    .video {
        width: 1px;
        height: 1px;
        margin-left: 60px;
        position: relative;
        top:5px;
        opacity:0;
        background-color: #00B4FF;
    }

    .panel{
        width: 300px;
        height: 80px;
        border-width: 1px;border-color: #e4e4e4;
        background-color: #f3f3f3;
        border-radius: 20px;
        padding-top:15px;
        padding-bottom: 15px;
        flex-direction: row;
    }
</style>

<script>
    export default {
        props:{
            audioSrc:{
                type:String
            },
            time:{
                type:Number
            }
        },
        data () {
            return {
                i_num:0,
                v_stat:false,
                play_stat:'pause',
                is_fail:false
            }
        },

        computed:{

            //播放时动态src
            i_src:function () {
                return `root:img/audio_img/left_audio_${this.i_num}.png`
            },
            //格式化时长默认单位是秒
            timeFomat:function () {
                if(!this.time){
                    return ''
                }
                var seconds =  parseInt(this.time/60)
                if(seconds > 0) {
                    return `${seconds}′ ${this.time%60 == 0   ?'':this.time%60}″`
                }else{
                    return `${this.time}″`
                }
            }
        },
        methods:{
            onfinish (event) {
               this.play()
            },
            onfail (event) {
                this.is_fail = true
            },

            play(){

                //失败
                if(this.is_fail) {
                    this.toast('加载出错了')
                    return
                }

                if(this.v_stat){
                    clearInterval(this.timer)
                    this.v_stat = false
                    this.i_num = 0
                    this.play_stat = 'pause'
                }else{
                    this.play_stat = 'play'
                    var self = this
                    this.timer = setInterval(()=>{
                        self.i_num = self.i_num == 3 ? 0:self.i_num+1
                        self.v_stat = true
                    },300)

                }

            }

        }
    }
</script>